简介
Lottie 是 Airbnb 开源的一套跨平台的完整的动画效果解决方案,设计师可以使用 Adobe After Effects 设计出漂亮的动画之后,使用 Lottic 提供的 Bodymovin 插件将设计好的动画导出成 JSON 格式,就可以直接运用在 iOS、Android、Web 和 React Native之上,无需其他额外操作。
简单来说,Lottie就是一个可以将AE动画转成可运行在IOS、Android、Web、React Native上的AE插件。
使用
工具
使用前请确保已安装这以下工具。
- 插件:bodymovin.zxp
- 解压:ZXP Installer
其他。
- Lottie预览:https://www.lottiefiles.com/p...
- web bodymovin cdn: https://cdnjs.com/libraries/b...
使用步骤
- 安装并解压
bodymovin
- 打开AE,添加
bodymovin
扩展 - 导出
data.json
文件
详细可参考:炫酷神器,AE插件Bodymovin.zxp的安装与使用
API
由bodymovin
导出的data.json
实际就是动画的数据文件,我们引入的bodymovin.js
库会对其做相应的解析。接下来我们只需要添加简单的初始化代码就可以在运行代码看到相应的动画效果了。
以下是最常用的api
1. 初始化
let animation = bodymovin.loadAnimation({
animationData, // [必须] data.json文件
path, // data.json文件路径(animationData/path选其一传入即可)
container,// [必须] 父容器
renderer, // [必须] 渲染方式
loop,
autoplay
})
2. 暂停/停止/播放
bodymovin.play()
bodymovin.pause()
bodymovin.stop() // 回到第0帧
3. 跳转之某帧并播放
animation.gotoAndStop(time)
OR animation.gotoAndStop(frame)
----
animation.gotoAndPlay(time)
OR animation.gotoAndPlay(frame)
4. 设置fp
animation.setSubframe()
// true: 使用本地环境的fps [默认]
// false: 使用ae原本的fps
5. 事件监听
animation.onComplete = function () {} // 动画结束
animation.onLoopComplete = function () {} // 当前循环结束
// 使用addEventListener方式
animation.addEventListener('complete', function () {})
animation.addEventListener('loopComplete', function () {})
一般来说以上的api
即可满足大部分的动画展示需求了。更详细内容可参考官网~
Bodymovin库
最后再分项目框架提供两个bodymovin
的库
- react:react-bodymovin
- vue:vue-lottie
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。